<template>
	<view>
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{item}}</text>
			</view>
		</scroll-view>
		<view class="main" v-if="currentTab == 0">
			<view v-for="(item, index) in getList" :key="index" class="centent">
				<image class="left" :src="item.avatar"></image>
				<view class="center">
					<view class="name">{{item.nickname}}</view>
					<view class="time">成为分销商时间:{{item.create_time}}</view>
				</view>
				<view class="right">
					<!-- <view class='num'>+5</view> -->
					<view class="numaa">{{item.count}}个下线</view>
				</view>
			</view>
			<view v-if="show" class="xiaxian">
				<image src="/static/remao_shop/img/xiaxian.png"></image>
				<view>暂无下线</view>
			</view>
		</view>
		<view class="main" v-if="currentTab == 1">
			<view v-for="(item, index) in getList" :key="index" class="centent">
				<image class="left" :src="item.avatar"></image>
				<view class="center">
					<view class="name">{{item.nickname}}</view>
					<view class="time">成为分销商时间:{{item.create_time}}</view>
				</view>
				<view class="right">
					<!-- <view class='num'>+5</view> -->
					<view class="numaa">{{item.count}}个下线</view>
				</view>
			</view>
			<view v-if="show" class="xiaxian">
				<image src="/static/remao_shop/img/xiaxian.png"></image>
				<view>暂无下线</view>
			</view>
		</view>
		<van-tabs :active="active" line-width="150" color="#E51F54" animated swipeable @change="onChange">
			<van-tab :title="'一级(' + ac + ')'">

			</van-tab>
			<van-tab :title="'二级(' + act + ')'">

			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	// hotmall/packageB/inserting/inserting.js
	var app = getApp();
	import api from "../../../api";

	export default {
		data() {
			return {
				uid: '',
				active: 0,
				ac: '0',
				act: '0',
				status: '1',
				show: false,
				getList: [],
				currentTab: 0,
				tabbar: ['一级()', '二级()']
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			wx.getStorage({
				key: 'userId',
				success: res => {
					console.log(res);
					this.setData({
						uid: res.data
					});
					this.getListFun();
				}
			});
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.getListFun();
			wx.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getListFun: function() {
				app.globalData.request({
					url: api.default.distribution_referrals,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						user_id: this.uid,
						status: this.status
					},
					method: 'POST',
					success: res => {
						console.log(res);
						wx.hideLoading();

						if (res.data != null) {
							this.setData({
								show: false,
								getList: res.data,
								ac: res.one_count,
								act: res.two_count
							});
							this.tabbar[0] = '一级(' + res.one_count + ')'
							this.tabbar[1] = '二级(' + res.two_count + ')'
						}

						if (res.data == null) {
							this.setData({
								getList: res.data
							});
							this.tabbar[0] = '一级(0)'
							this.tabbar[1] = '二级(0)'
							this.setData({
								show: true
							});
						}
					}
				});
			},

			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
				this.setData({
					show: false,
					getList: []
				});
				wx.showLoading({
					title: '加载中'
				});
				this.setData({
					status: cur + 1
				});
				this.getListFun();
			},

			onChange(event) {
				this.setData({
					show: false,
					getList: []
				});
				wx.showLoading({
					title: '加载中'
				});
				this.setData({
					status: event.detail.index + 1
				});
				this.getListFun(); // wx.showToast({
				//    title: `切换到标签 ${event.detail.index + 1}`,
				//    icon: 'none'
				// });
			}

		}
	};
</script>
<style>
	@import "./inserting.css";

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tab-view {
		width: 100%;
		height: 100upx;
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		white-space: nowrap;
	}

	.tab-bar-item {
		padding: 0 10upx;
		width: 335upx;
		height: 100upx;
		min-width: 80upx;
		line-height: 100upx;
		margin: 0 20upx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}

	.tab-bar-title {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #999;
		font-weight: 400;
	}

	.active {
		border-bottom: 6upx solid #e51f54;
	}

	.active .tab-bar-title {
		color: #333 !important;
		font-size: 28upx;
		font-weight: 500;
	}

	.main {
		margin-top: 100upx;
	}
</style>
